<template>
  <div style="margin: 0 100px;">
    <div class="top">
        <img :src=" auction.fm "/>
        <div class="text">
            <div class="title">{{ auction.pmhmc }}</div>
            <div class="company">拍卖企业：天津鑫容一诺拍卖有限公司</div>
            <div class="phone">联系电话：13312345678</div>
            <div class="time">开始时间：{{ auction.kpsj }}</div>
            <div class="button">
                <el-button type="primary" @click="toLot(lot[0])">进入拍卖会</el-button>
            </div>
            
            <div class="desc">
                <div class="lotNumber">标的数量</div>
                <div class="watchingNumber">围观次数</div>
            </div>
        </div>
    </div>
    <div class="middle">
        <el-tabs class="tabs" @tab-click="handleClick">
            <el-tab-pane class="button" label="标的列表">

                    <div class="item" v-for="(item, index ) in lot" :key="index" @click="toLot(item)">
                        <img :src="item.sctp " alt="加载失败"/>
                        <div class="text">
                            <div class="name">{{ item.bdmc }}</div>
                            <div class="price">当前价<span style="font-weight: bold;">{{ item.blj }}</span>元(<span style="font-weight: bold;">0</span>次出价)</div>
                            <div class="time">报名截止时间：{{ item.bmjzsj }}</div>
                        </div>
                    </div>

            </el-tab-pane>
            <el-tab-pane class="button" label="拍卖公告">拍卖公告</el-tab-pane>
        </el-tabs>
    </div>
  </div>
</template>

<script>
import { getPmhInfo,getLotInfo } from '@/api/lotList/lotList';
export default {
    data(){
        return{
            lot: [],
            auction: {},
            query: ''
        }
    },
    methods: {
        handleClick(tab){
            console.log(tab.label);
            // this.lot = [];
            if(tab.label == '拍卖公告'){
                this.$router.push({
                    path: '/notice',
                    query: {
                        pmggbh: 'pmgg' + this.query.pmhbh.substring(3),
                    }
                });
            }
        },
        getPmh(){
            getPmhInfo(this.query.pmhbh).then((res) => {
                if(res){
                    this.auction = res.data;
                    console.log('auction',this.auction);
                }
            });
        },
        getLot(){
            getLotInfo(this.query.pmhbh).then((res) => {
                if(res){
                    this.lot = res.data;
                    console.log('lot',this.lot);
                }
            });
        },
        toLot(item){
            // console.log(item);
            this.$router.push({
                path: '/lot',
                query: {
                    bdbh: item.bdbh
                }
            });
        },
    },
    mounted(){
        this.query = this.$route.query;
        console.log(this.query);
        this.getPmh();
        this.getLot();
    }
}
</script>

<style lang="less" scoped>
.top{
    width: 100%;
    display: flex;
}
.top img{
    width: 70%;
    height: 300px;
}
.top .text{
    background-color: #fff;
    width: 26%;
    margin-left: 10px;
    padding: 10px;
}
.top .text .title, .time{
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin: 20px 0;
}
.top .text .company, .phone{
    font-size: 14px;
    color: #666;
}
.top .text .button{
    text-align: center;
}
.top .text .desc{
    display: flex;
    justify-content: space-around;
    padding: 10px;
    margin-top: 10%;
    color: #666;
}
.middle{
    width: 100%;
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
    text-align: center;
}

.middle .button{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.middle .button .item{
    // width: 28%;
    border: 1px solid rgb(250, 250, 250);
    padding: 4px;
    cursor: pointer;
    margin: 10px 0;
}
.middle .button .item img{
    width: 200px;
    height: 150px;
    padding: 10px;
}
.middle .button .item .text{
    text-align: center;
}
.middle .button .item .text .name{
    font-weight: bold;
}
.middle .button .item .text .price{
    font-size: 12px;
}
.middle .button .item .text .time{
    font-size: 12px;
    // font-weight: bold;
}
</style>